<template>
    <div class="c-first">
        <div class="c-first-item">
            <c-title>
                一、大赛介绍
            </c-title>
            <div class="c-first-one-text">
                <div class="one-text-title">
                    1.大赛宗旨
                </div>
                <div class="one-text-content">
                    济南市第一届“国学达人”挑战赛以弘扬中华民族传统文化、提升青少年传统文化涵养、增强青少年文化自信为理念，使其成为全市青少年学习、展示、交流国学知识的黄金舞台，传播优秀传统文化的绝佳平台，从而激发青少年及社会各界更加关注国学、热爱国学、学习国学。
                </div>
            </div>
            <div class="c-first-one-text">
                <div class="one-text-title">
                    2.参与对象
                </div>
                <div class="one-text-content">
                    活动分为小学组、初中组、高中组和大学组。参加对象为全市各大、中、小学校在校学生。其中，小学组1-2年级学生为自愿参与，以3-6年级学生为参赛主体；中学阶段以非毕业班学生为参赛主体；中等职业学校学生可参加高中组活动；大学组以本科生和研究生为参赛主体。
                </div>
            </div>
        </div>
        <div class="c-first-item c-first-two">
            <c-title>
                二、比赛时间
            </c-title>
            <ul class="c-first-two-menu">
                <li  v-for="(item,index) in menu"
                     :class="{'border-red': index === menuI}"
                     @click="checkMenu(index)">{{item}}</li>
            </ul>
            <div class="c-first-two-content">
                <div class="two-content-item" v-for="item in menuContent">
                    <div class="black-round">
                        <div>{{item.name.substr(0,1)}}</div>
                        <div>{{item.name.substr(1,2)}}</div>
                    </div>
                    <div class="two-content-item-time">
                        <div><img src="../../../assets/img/china/line.png" alt=""></div>
                        <div class="item-time-content">
                            <div><span>报名时间</span>2017年4月25日-5月20日</div>
                            <div><span>比赛时间</span>2017年4月25日-5月20日</div>
                            <div><span>公布结果</span>2017年4月25日-5月20日</div>
                        </div>
                        <div><img src="../../../assets/img/china/line.png" alt=""></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="c-first-item c-first-three">
            <c-title>
                三、比赛内容
            </c-title>
            <div class="c-three-content">
                <div>
                    基本范围：包括中华传统哲学、史学、文学、语言文字、艺术、民俗、宗教、服饰、饮食、建筑、交通、历史地理、文物古籍、法制、经济、科技、医学、农学等。
                </div>
                <div>
                    <span>1、小学组。</span>
                    ①学习掌握小学教材中的中华优秀传统文化知识。②掌握常用汉字、成语故事、经典诗文的基本内涵；了解中华民族传统节日、节气、神话等专题的常识及其文化内涵；熟悉基本传统礼仪、传统体育、经典民间艺术与民族艺术、著名的文化古迹、脍炙人口的励志教育故事、中华民族发展史等基础内容。③《三字经》《百家姓》《千字文》《千家诗》《弟子规》《声律启蒙》《龙文鞭影》《论语》《西游记》等经典书目中适合小学生学习掌握的常识性、基础性内容。
                </div>
                <div>
                    <span>2、初中组。</span>
                    ①学习掌握小学组上述内容。②学习掌握初中教材中的中华优秀传统文化知识。③初步掌握古代诗词格律知识、基本的文言文听说读写能力；了解中国历史的重要史实和发展的基本线索；对书法、传统音乐、戏剧美术等艺术作品有基本的欣赏和操作能力。④《孟子》《诗经》《战国策》《资治通鉴》《山海经》《墨子》《列子》《庄子》《唐诗三百首》《宋词三百首》《水浒传》《三国演义》等经典书目中适合初中生学习掌握的内容。
                </div>
                <div>
                    <span>3、高中组</span>
                    ①学习掌握小学组、初中组上述内容。②学习掌握高中教材中的中华优秀传统文化知识。③理解掌握篇幅较长的传统文化经典作品、中华文明形成的历史进程、人民群众创造历史的决定作用和杰出人物的贡献、传统美德与时俱进的品质、传统艺术的表现形式和特点等内容。④《中庸》《大学》《左传》《国语》《史记》《老子》《荀子》《韩非子》《吕氏春秋》《古文观止》《元曲三百首》《红楼梦》等经典书目中适合高中生学习掌握的内容。
                </div>
                <div>
                    <span>4、大学组。</span>
                    ①学习掌握小学组、初中组、高中组上述内容。②理解掌握中国古代思想文化重要典籍中的精髓，正确把握中华优秀传统文化与中国化马克思主义、社会主义核心价值观的关系。③《尚书》《周易》《礼记》《孝经》《史通》《孙子兵法》《淮南子》《楚辞》《文选》《杜工部集》《文心雕龙》等经典书目中应当掌握的内容。
                </div>
            </div>
        </div>
        <div class="c-first-item c-first-four">
            <c-title>
                四、大赛评委
            </c-title>
            <div class="c-four-content">
                <div class="c-four-item">
                    <img src="../../../assets/img/china/person.png" alt="">
                    <div class="c-four-item-text">
                        <div>
                            刘德文&nbsp;教授
                        </div>
                        <div></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { cTitle } from '../../../components/main';
    export default {
        name:'c-first',

        data() {
            return {
                menu: ['小学组','初中组','高中组','大学组'],
                menuI:0,
                menuContent: [
                    {
                        name:'初赛'
                    },
                    {
                        name:'复赛'
                    },
                    {
                        name:'决赛'
                    }
                ]
            }
        },

        methods:{
            checkMenu(i) {
                this.menuI = i;
            }
        },

        components:{
            cTitle
        },

        mounted() {

        }
    }
</script>

<style lang="less" scoped rel="stylesheet/less" type="text/css">
    @import "../../../plugins/assets/css/flex.less";
    .c-first{
        width: 50%;
        margin: 50px auto;
        &-item {
            margin-bottom:50px;
            .c-first-title{
                text-align: center;
                font-weight:bold;
                font-size:30px;
            }
            .c-first-one-text {
                margin: 20px 0;
                .one-text-title {
                    font-size:24px;
                    font-weight:bold;
                    text-align: center;
                    margin: 20px;
                }
                .one-text-content{
                    font-size:18px;
                    font-weight:bold;
                    line-height:28px;
                }
            }
        }
        .c-first-two {
            &-menu {
                width: 60%;
                margin:30px auto;
                .flex-auto;
                font-size:22px;
                font-weight:bold;
                li {
                    padding-bottom: 10px;
                    cursor: pointer;
                    color: #B12828;
                    border-bottom:2px solid transparent;
                }
                .border-red{
                    border-bottom: 2px solid #B12828;
                }
            }
            &-content{
                width: 70%;
                margin:30px auto;
                .two-content-item {
                    .flex-auto;
                    margin: 30px 0;
                    &-time{
                        font-weight:bold;
                        text-align: center;
                        img{
                            width: 100%;
                            height:auto;
                            vertical-align: middle;
                        }
                        .item-time-content{
                            div{
                                margin: 20px 0 30px 0;
                                span {
                                    margin-right: 30px;
                                }
                            }
                        }
                    }
                }
            }
        }
        .c-first-three{
            .c-three-content {
                line-height: 30px;
                font-weight:bold;
                :first-child {
                    margin-top: 50px;
                }
                div {
                    margin-bottom: 20px;
                }
                span{
                    color:#B12828;
                }
            }
        }
        .c-four-content{
            overflow: hidden;
            .c-four-item {
                float: left;
                width: 20%;
                background: url('../../../assets/img/china/black_round.png') 0 40px no-repeat;
                background-size:80%;
            }
        }
    }
    .black-round{
        background:url('../../../assets/img/china/black_round.png') 0 0 no-repeat;
        width: 140px;
        height:120px;
        color: #fff;
        font-weight:bold;
        font-size:24px;
        padding: 40px 0 0 50px;
        :last-child{
            text-indent:1em;
        }
    }
</style>